<template>
	
	<h1>响应式基础</h1>
	<h2>一个人的信息</h2>
	<h3>姓名：{{name}}</h3>
	<h3>姓名：{{name2}}</h3>
	<h3>年龄：{{age}}</h3>
	<h3>性别：{{sex}}</h3>
	
	<h3>工作种类：{{job.type}}</h3>
	<h3>工作薪资：{{job.salary}}</h3>
	
	
	<h3>工作种类：{{job2.type}}</h3>
	<h3>工作薪资：{{job2.salary}}</h3>
	<h3>测试c：{{job2.a.b.c}}</h3>
	<h3>爱好：{{love}}</h3>
	
	<button @click="sayHello">说话</button>
	<button @click="changeInfo">变更信息</button>
	
</template>

<script>
	
	import {h} from 'vue'
  import {ref} from 'vue'
  import { reactive } from 'vue'


  export default{
    name:'demo1',
    setup() {
      let name = '张三'
      let age = 19
      let sex = '男'
      let name2 = ref('张三')
      let job = ref({
        type:'前端工程师',
        salary:'30k'
      })

      let job2 = reactive({
        type:'前端工程师',
        salary:'30k',
        a:{
          b:{
            c:666
          }
        }
      })

      let love = ['抽烟','喝酒','打牌']



      function sayHello(){
        alert(`你好，我叫${name},今年${age}岁了。`)
      }

      function changeInfo(){
        name ='李四'
        name2.value = '李四'
        job.value.type='java工程师'
        job2.type = 'java工程师'
        job2.a.b.c = 999

        console.log(job2);
        // console.log(name)
        // console.log(name2)

        love[0] = '抽大烟'
      }

      //返回一个对象（常用）
      return {
        name,
        age,
        sex,
        name2,
        job,
        job2,
        love,

        sayHello,
        changeInfo
      }

      //返回一个函数
      // return ()=>return h('h1','hhl')
    }
  }
</script>

<style>
</style>